<template>
  <div class="uploadFile">
    <i class="title">{{ title }}</i>
    <el-upload
      class="upload-demo"
      :with-credentials="isWithCredentials"
      action="string"
      :headers="headers"
      :accept="type"
      :show-file-list="false"
      :http-request="uploadTxt"
      :before-upload="beforeTxtUpload"
    >
      <el-button slot="trigger" type="primary" class="btnTxt">{{ btnTxt }}</el-button>
      <slot />
    </el-upload>
    <div v-if="isAlready">
      <i class="status">已上传</i>
      <i class="time">{{ uploadInfo.dates }}</i>
      <i class="name">{{ uploadInfo.staffName }}</i>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UploadFile',
  props: {
    title: { default: '', type: String }, // 标题
    type: { default: 'txt/*', type: String },
    isAlready: { default: false, type: Boolean }, // 是否已上传
    uploadInfo: { default: () => {}, type: Object }, // 上传后返回的信息
    isWithCredentials: { default: true, type: Boolean },
    btnTxt: { default: '导入文件', type: String },
    uploadTxt: { default: () => {}, type: Function },
    beforeTxtUpload: { default: () => {}, type: Function }
  },
  data() {
    return {
      headers: { // 请求头
        'Content-Type': 'multipart/form-data'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.uploadFile{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 14px;
  margin: 20px 0;
  .title{
    margin: 0 20px;
  }
  .upload-demo {
    .btnTxt{
      width: 200px;
    }
  }
  .status{
    margin: 0 10px;
    color: $uploadSuccess;
  }
  .time{
    margin: 0 10px;
  }
  .name{
    margin: 0 10px;
  }

}
</style>
